<template>
	<div class="zh-paper-view">
		<nav-header>
			<template slot="menuBefore">
				<li><router-link :to="headLink" tag="a">{{head_title}}</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li>试卷查看</li>
		</nav-header>

		<div class="zh-examinationPaper-content" 
			v-loading="loading.status"
	    	:element-loading-text="loading.txt">
			<div class="h-title">
				<h2>{{listData.name}}</h2>
				<span>满分{{listData.total_score}}分</span>
			</div>
			<div class="examinationPaper-list">
				<!-- 一次循环 -->
				 <template v-for="(item , inx) in listData">
					<div class="list-option" :key='inx'>
						<div class="list-option-title">
							<span>{{item.cn_num}}. {{item.question_type}}（ {{item.count}} 题，共 {{item.score}}分）</span>
						</div>
						<template  v-for="(item2 , inx2) in item.children">
							<div class="list-option-content" :key="inx2">
								<ul>
									<li>{{inx2+1}}.<span v-if="item2.pattern === 1" v-html="item2.content"></span> <img v-else :src="BASE_URL+item2.content_path"/><span class="fraction">（{{item2.score}}分）</span></li>
									<template v-for="(item2, inx3) in item2.option">
										<li v-html="item2.name+'.'+item2.value" :key="inx3"></li>
									</template>
								
								</ul>

								<div class="list-option-explanation clear">
									<div class="fl">难度：{{item2.difficulty}}</div>
									<div class="fr">
										<el-popover
										  placement="left-end"
										  width="600"
										  trigger="click">
											<div class="list-option-answer">
												<ul>
													<li v-if="[1, 2, 4].includes(item2.type_base_id)">
														<span>答案：</span>
														<span class="answer-first color">{{renderAnswer(item2.answer)}}</span>
													</li>
													<li>
														<span>统计：</span>
														<span class="answer-first">本题共被作答
															<span class="answer-second">{{item2.question_info.answer_count}}</span>
															次，正确率为
															<span class="answer-third">{{item2.question_info.true_probability}}%</span>
														</span>
													</li>
													<li class="clear">
														<span class="fl">解析：</span>
														<span class="answer-first fl" v-if="item2.pattern === 1" v-html="item2.resolve"></span>
														 <img v-else :src="BASE_URL+item2.resolve_path"/>
													</li>
												</ul>
											</div>
										  	<el-button slot="reference" type="text">查看解析</el-button>
										</el-popover>
									</div>
								</div>
							</div>
						</template>	
					</div>
				</template> 
			</div>
			<div class="examinationPaper-button">
				<el-button type="primary" @click="cancel()">返回试卷管理</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
	      	return {
                testId: this.$route.params.id.split('&')[0],
                sourceType: this.$route.params.id.split('&')[1],
                headLink: '/teaching/group/circle-group',
                head_title: '学科圈组',
                listData:[],
                loading:{
                    status:false,
                    txt:'加载数据...'
                }
	      	}
	    },
	    created(){
            if (this.sourceType) {
                this.head_title = '试卷审核';
                this.headLink = '/teaching/group/circle-group';
            }
            this.getTest();
        },
	    methods: {
	    	renderAnswer( answer ){
				return (typeof(answer)=='object' && !is_empty(answer))?answer.join(','):answer
			},
	    	getTest(){
	    		this.loading.status = true;
	    		this.listData.total_score = 0;
	    		let success = (data=>{
	    			var result =  data.data;
	    			this.listData.name = result.name;
	    			this.listData.total_score = 0;
	    			for( var i = 0 ;i < result.question_type.length ;i++ ){
	    				result.question_type[i].children = [];
	    				for( var j = 0 ;j < result.question_list.length ; j++ ){
	    					if(parseInt( result.question_type[i].id ) === result.question_list[j].qt_id ){
	    						if( is_empty(result.question_list[j].option) && (parseInt(result.question_list[j]) === 1 || parseInt(result.question_list[j]) === 2) ){
	    							 result.question_list[j].option = [];
	    						}
	    						result.question_type[i].children.push( result.question_list[j] );
	    						this.listData.total_score += parseInt(result.question_list[i].score);
	    					}

	    					
	    				}
	    				this.listData.push( result.question_type[i] ) ;
	    			}
	    			this.loading.status = false;
            	})
            	let fail =  (data=>{
            		this.loading.status = false;
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/test/test_detail',{params: {id:this.testId},func:{success:success,fail:fail}})
	    	},
			// 取消
			cancel(){
				this.$router.go(-1)
			},
		}
	}
</script>
<style lang="scss">
	.zh-paper-view {
		.zh-examinationPaper-content {
			.h-title {
				padding-top: 30px;
				text-align: center;
			}
			.examinationPaper-list {
				max-width: 1400px;
				margin: 30px auto;
				border: 1px solid #e6e6e6;
			}
			.list-option-title {
				padding: 8px 0 8px 40px;
				background-color: #e5f1ff;
			}
			.list-option-content {
				ul {
					padding: 12px 40px; 
					li {
						// height: 30px;
						// line-height: 30px;
						.fraction {
							color: #d7ad63;
						}
					}
				}
			}
			.list-option-explanation {
				background-color: #f9f9f9;
				.fl {
					padding: 8px 40px;
				}
				.fr {
					padding-right: 40px;
				}
				button {
					font-size: 14px;
				}
			}
			.examinationPaper-button {
				padding: 15px 0;
				text-align: center;
			}
		}
	}
</style>